<template>
<div class="wrap">
	<h3>个人资料</h3>
	<dl class="userdata">
		<dt class="title">当前头像 :<img :src="headphoto.src"/> <i @click="changephoto">修改</i></dt>
		<dd>昵称 : <input type="text" v-model="nicknames" @blur="nickname" class="nick"/></dd>
		<dd>
			<label>性别：</label>
			<input type="radio" name="sex"  :checked="bol" value='male' class="man" @click="getgender"/><label >男</label>
			<input type="radio" name="sex" :checked="!bol"  class="woman" @click="getsex" value="female"/><label>女</label>
        </dd>
		<dd class="birthday">生日 : <selectdate></selectdate></dd>
		<dd>手机 : <input type="text" v-model="phone"/> <i @click="changenum">更换手机</i></dd>
		<button @click="submit">确认提交</button>
		
	</dl>
</div>
</template>

<script>
	import selectdate from "./selectdate.vue"
	export default{
		name:"personaldata",
		components:{
			selectdate
		},
		data(){
			return{
				 headphoto:{src:require('../../assets/image/user/2.png')},
				 nicknames:"13012341234",
				 phone:"13012341234",
				 bol:true
			}
		},
		methods:{
			changephoto:function(){
				
			},
			nickname:function(){
				console.log(this.nicknames)
			},
			changenum:function(){
				console.log(this.phone)
			},
			submit:function(){
				console.log(this.phone,this.nicknames);
			},
			getgender:function(){
				console.log($(".man").val());				
			},
			getsex:function(){
				console.log($(".woman").val());
			}
		}
	}
	
</script>

<style scoped>
.wrap{
	width: 1085px;
	height: 623px;
	border: 1px solid rgb(242,242,242);	
}
h3{
	font-weight: 400;
	font-size: 18px;
	color: rgb(76,76,76);
	text-indent: 22px;
	line-height: 58px;
	border-bottom: 1px solid rgb(242,242,242);	
}
.userdata{
	padding-left: 42px;
}
img{
	width: 78px;
	vertical-align: middle;
	padding: 0 10px;
}
.title{
	font-size: 16px;
	padding-top: 40px;
	color: rgb(76,76,76);
	text-indent: 8px;
}
.title>i{
	font-size: 14px;
	color:rgb(141,202,48);
	font-style: normal;
}
dd{	
	color: rgb(76,76,76);
	line-height: 44px;
}
dd:nth-of-type(1){
	margin-top: 10px;
}
input{
	display: inline-block;
	text-indent: 10px;
	line-height: 28px;
	font-size: 14px;
	border: 1px solid rgb(211,211,211);
}
dd:nth-of-type(1)>input,dd:nth-of-type(4)>input{
	background-color: rgb(244,244,244);
}
dd:nth-of-type(2)>input{
	display: inline-block;
	width: 14px;
	vertical-align: 2px;
	margin-right: 10px;
}
.man{
	margin-right: 30px;
}
dd>i{
	font-style: normal;
	color: rgb(141,202,48);
}
button{
	display: inline-block;
	width: 150px;
	height: 50px;
	border: none;
	color: white;
	font-size: 18px;
	background-color: rgb(247,131,39);
	border-radius: 5px;
	margin-top: 35px;
	font-weight: 100;
	margin-left: 86px;
}
</style>